<!-- 逻辑代码块-->
<script setup lang="ts">
import { ref } from 'vue'

const gameShop = ref(['怪物猎人:世界', '逃离塔科夫', '我的世界', '八方旅人'])

const person = ref({
  name: '张三',
  age: 18,
  sex: '男',
  address: '北京市',
  job: '前端工程师',
  hobby: ['打游戏', '看电影'],
})
</script>

<!-- 结构块:-->
<template>
  <h2>循环数组</h2>
  <ul>
    <li v-for="(item, index) in gameShop" :key="index">{{ item }}</li>
    <!-- 下标可以省略不写 -->
  </ul>

  <h2>循环对象</h2>
  <ul>
    <!-- 循环对象时第二项是键 -->
    <li v-for="(item, key) in person" :key="item">{{ item }}---{{ key }}</li>
  </ul>

  <h2>基于数字生成列表</h2>
  <ul>
    <li v-for="(item, index) in 10" :key="item">
      <p>你好+{{ index }}</p>
    </li>
  </ul>
</template>

<!-- 样式块-->
<style scoped></style>
